<template>
  <div>
    <!-- 头部 -->
    <div class="address-top">
      <p @click="back">返回</p>
      <p>群成员</p>
      <p @click="showSelect" ><span v-show="isTrueAdd"> +</span></p>
    </div>
    <!-- 头部 end -->
    <header class="padd15">群主、管理员({{manageNum + 1}})人</header>
    <!-- 群主 -->
    <div class="white padd15">
      <div class="flex common" @click="personalData(ownerList.To_Account)" :class="{bottomLine:manageNum>1}">
        <img class="img" :onerror="defaultImg" :src="ownerList.Tag_Profile_IM_Image" alt="">
        <div class="right flex1">
          <span class="identify" style="background: #ECB733;">群主</span><span class="name">{{ownerList.Tag_Profile_IM_Nick}}</span>
        </div>
      </div>
    </div>
    <!-- 管理员 -->
    <div class="white padd15">
      <div class="flex common" @click="personalData(val.To_Account)" v-for="(val,key) in manageList" :key="key">
        <img class="img" :onerror="defaultImg" :src="val.Tag_Profile_IM_Image" alt="">
        <div class="right flex1">
          <span class="identify" style="background: #41C28E;">管理员</span><span
          class="name">{{val.Tag_Profile_IM_Nick}}</span>
        </div>
      </div>
    </div>
    <!-- 普通成员-->
    <header class="padd15">普通成员({{commonNum}})人</header>

    <div class="white padd15">
      <div class="flex common" @click="personalData(val.To_Account)" v-for="(val,key) in commonList" :key="key">
        <img class="img" :onerror="defaultImg" :src="val.Tag_Profile_IM_Image" alt="">
        <div class="right flex1">
          <span class="identify">成员</span><span class="name">{{val.Tag_Profile_IM_Nick}}</span>
        </div>
      </div>
    </div>
    <!-- 菜单 -->
    <mt-popup v-model="popupVisible" class="popup" :class="{publicTop:currentRole==='Member'}" position="right">
      <p v-show="groupType == 'Private'" @click="addMember">邀请新成员</p>
      <p v-show="currentRole != 'Member'" @click="delMember">删除群成员</p>
    </mt-popup>
  </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
  // 公共群样式
  .publicTop {
    top: .8rem !important;
  }
  .flex1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .popup {
    background: #fff;
    top: 1rem;
    right: .07rem;
    &:before {
      width: 0;
      height: 0;
      display: block;
      content: '';
      border-width: .06rem;
      border-style: solid;
      border-color: transparent transparent #fff transparent;
      position: absolute;
      right: .1rem;
      top: -.12rem;
    }
    p {
      font-size: .14rem;
      color: #4A4A4A;
      line-height: .4rem;
      border-bottom: .005rem solid #e1e1e1;
      padding: 0 .08rem;
    }
  }

  header {
    line-height: .27rem;
    color: #818181;
  }

  .common {
    height: .6rem;
    align-items: center;
    &:nth-last-child(1) {
      .right {
        border-bottom: none;
      }
    }
    .img {
      width: .4rem;
      height: .4rem;
      border-radius: 50%;
      margin-right: .08rem;
    }
    .right {
      border-bottom: .005rem solid #e1e1e1;
      line-height: .6rem;
      height: 0.6rem;
    }
    .identify {
      padding: .03rem .07rem;
      background: #4AB7E2;
      margin-right: .15rem;
      color: #fff;
    }
    .name {
      font-size: .16rem;
      color: #4A4A4A;
    }
  }

  .bottomLine {
    .right {
      border-bottom: .005rem solid #e1e1e1 !important;
    }
  }
</style>

<script>
  import {getProfile} from '../../assets/js/commonWebim'
  import Client from '@/assets/js/common';
  import {checkStatus} from '../../assets/js/login';
  import {Toast} from 'mint-ui'
  export default {
    data () {
      return {
        defaultImg: Client.defaultImg,
        groupId: '',  // 群 ID
        groupType: '',// 群性质  Private 私有群

        ownerList: [], // 群主数据
        manageList: [],   // 管理员数据
        manageNum: 0,     // 管理员数量

        commonList: [],  // 成员数据
        commonNum: 0,    // 成员数量
        currentRole: '', //当前用户角色
        popupVisible: false,  // 菜单
        isTrueAdd: false, //添加群成员和删除群成员的（ + ）图标
        groupDetailPage: Client.getStore("groupDetailsPage")
      }
    },
    mounted () {
      
      this.groupId = this.$route.query.groupId  // 群ID
      this.groupType = Client.getStore('ClickCurrentGroupData').TypeEn  // 群性质：私有群、公开群
      this.currentRole = Client.getStore('ClickCurrentGroupData').RoleEn  // 群性质：私有群、公开群
      this.isShow();
      checkStatus((loginInfo) => {
        this.getGroupMemberInfo(this.groupId) //获取群成员
      });
    },
    methods: {
      // 返回
      back(){
        history.back()
      },
      // 查看群成员资料
      personalData(userID) {
        if(userID) {
          this.$router.push({path: "/friendDetails?id="+userID});
        }
      },
      isShow() {
        if(this.groupType == "Private" || (this.groupType != "Private" && this.currentRole != "Member")) {
          console.log(this.currentRole);
          this.isTrueAdd = true;
        }
        
      },
      // 获取当前群组成员
      getGroupMemberInfo(group_id) {
        let That = this;
        let options = {
          'GroupId': group_id,
          'Offset': 0, // 必须从0开始
          'Limit': 2000,
          'MemberInfoFilter': [
            'Account',
            'Role',
            'JoinTime',
            'LastSendMsgTime',
            'ShutUpUntil'
          ]
        };
        webim.getGroupMemberInfo(
          options,
          function (resp) {
            if (resp.MemberNum <= 0) {
              Toast('该群组目前没有成员');
              return;
            }
            let data = [];
            for (let i in resp.MemberList) {
              let account = resp.MemberList[i].Member_Account;
              let role = webim.Tool.groupRoleEn2Ch(resp.MemberList[i].Role);
              let part = resp.MemberList[i].Role;
              let join_time = webim.Tool.formatTimeStamp(resp.MemberList[i].JoinTime);
              let shut_up_until = webim.Tool.formatTimeStamp(resp.MemberList[i].ShutUpUntil);
              if (shut_up_until == 0) {
                shut_up_until = '-';
              }

              data.push({
                GId: group_id,
                GroupId: webim.Tool.formatText2Html(group_id),
                Member_Account: webim.Tool.formatText2Html(account),
                Role: role,
                JoinTime: join_time,
                ShutUpUntil: shut_up_until,
                Part: part
              });
            }
            let owner = That.filterData(data, 'Owner')  // 群主
            let common = That.filterData(data, 'Member')   // 成员

            // 私有群没有管理员
            if (That.groupType !== 'Private') {
              let manager = That.filterData(data, 'Admin') // 管理员
              if (manager.length) {
                getProfile(manager, function (res) {
                  That.manageList = res;
                  That.manageNum = res.length;
                })
              }
            }
            // 查询个人详细信息
            getProfile(owner, function (res) {
              That.ownerList = res[0];
            })

            if (common.length) {
              getProfile(common, function (res) {
                That.commonList = res;
                That.commonNum = res.length;
              })
            }
          },
          (err) => {
            console.log(err.ErrorInfo);
          }
        );
      },
      // 选择成员
      showSelect(){
        this.popupVisible = true
      },
      // 添加新成员
      addMember(){
        this.$router.push({path: 'groupMemers', query: {groupId: this.groupId, type: 'add'}})
      },
      // 删除新成员
      delMember(){
        this.$router.push({path: 'groupMemers', query: {groupId: this.groupId, type: 'del'}})
      },
      // 数据过滤
      filterData(allData, option){
        let owner = allData.filter(val => val.Part === option) // 群主
        let ownerArr = []
        owner.forEach(val => {
          ownerArr.push(val.Member_Account)
        })
        return ownerArr
      }

    }
  }

</script>
